<template>
  <div class="index_top_bg">
    <div class="content_out index_top_menu">
      <div style="margin:0px auto">
        <TopNav :show_links="false"></TopNav>
      </div>
      <div class="bottom_child_links">
        <div class="items">
          <nuxt-link :to="'/class/aaa'"><img src="/img/Introduce.png"> 采招公告</nuxt-link>
        </div>
        <div class="items"><nuxt-link :to="'/class/aaa'">采招公告</nuxt-link></div>
        <div class="items"><nuxt-link :to="'/class/aaa'">采招公告</nuxt-link></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HavePicTop'
}
</script>

<style scoped lang="scss">
$mobile-width: 0;
$pad-width: 576px;
$pc-width: 1024px;

@mixin mobile {
  @media (min-width: $mobile-width) {
    @content;
  }
}

@mixin pad {
  @media (min-width: $pad-width) {
    @content;
  }
}

@mixin pc {
  @media (min-width: $pc-width) {
    @content;
  }
}

.index_top_bg {
  background-image: url(/img/top_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  @include mobile {
    height: 200px;
    background-size:cover;
  }
  @include pad {
    height: 259px;
    background-size:cover;
  }

  @include pc {
    height: 380px;
  }

  .index_top_menu {
    height: 100%;
    position: relative;
    .bottom_child_links {
      width: 100%;
      height: 90px;
      position: absolute;
      bottom: 0px;
      left: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      @include mobile {
        visibility: hidden;
      }
      @include pad {
        visibility: hidden;
      }
      @include pc {
        visibility: visible;
      }
      .items {
        width: 318px;
        height: 90px;
        background: rgba(255, 255, 255, 0.4);
        text-align: center;
        color: #fff;
        font-size: 1.3rem;
        position: relative;
        a{
          color: #fff;
          width: 100%;height: 100%;position: absolute;top:0px;left:0px;
          text-decoration: none;text-align: center;line-height:90px;
        }
        &:hover{
          background:#ef0413
        }
      }

    }
  }
}
</style>
